<template>
    <div class="box">
        <div>
            <header>
                <van-icon name="arrow-left" size="20" @click="back"/>
                <span>设置密码</span>
                <p>跳过</p>
            </header>
            <div class="div2">
                <div :class="active!= 1 ? 'int_num':'int_num int_num_active'">
                    <input type="password" placeholder="请设置登录密码" maxlength="20" v-model="password" @focus="active=1" @blur="active=''" />
                </div>
                <div :class="active!= 2 ? 'int_num':'int_num int_num_active'">
                    <input type="password" maxlength="20" placeholder="请再次输入密码" v-model="secondPassword" @focus="active=2" @blur="active=''" />
                </div>
            </div>
            <div class="login">
                <span @click="set">确定</span>
            </div>
        </div>
        
    </div>
</template>

<script>
import { Icon } from 'vant';
import { password } from "@/request/http";
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
export default {
    name:"setpass",
    data() {
        return {
            password: "",
            secondPassword: "",
            active: ""
        };
    },
    methods: {
        ...mapMutations(['course1','course2','loginparams1']),
        back(){
            this.$router.go(-1);
            this.course2()
        },
        set() {
            if (this.secondPassword == this.password) {
                this.loginparams1(this.password)
                password().then(res => {
                    console.log(res)
                    this.$toast("设置成功");
                    this.$router.push("/setmessage");
                });
            } else {
                this.$toast("两次输入的密码不相同");
            }
        },
        goPerson() {
            this.$router.push("/setmessage");
        }
    }
};
</script>
<style lang="scss" scoped>
@import "@/assets/CSS/index.scss";
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.box{
    width:100%;
}
header{
    width:100%;
    border-bottom:1px solid;
    display:flex;
    text-align:center;
    padding:.2rem 0;
    background:white;
    .van-icon{
        width:10%;
        padding-top: 5px;
    }
    span{
        flex:1;
        font-size:20px;
    }
    p{
        width:10%;
        padding-top: 5px;
    }
}
.div2{
    background-color: #fff;
    margin-top: 10px;
    padding: 0 10px;
}
input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: rgba(190, 190, 190, 1);
}
.int_num {
    height: 40px;
    background-color: #fff;
    border-bottom: 1px solid #f1f;
    input {
        box-sizing: border-box;
        padding: 20px 0;
        border: 0;
        width: 100%;
        height: 100%;
        font-size: 15px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        line-height: 40px;
        float: left;
        outline: none;
    }
}
.int_num_active {
    border-color: $theme_color;
}
.login {
    width: 90%;
    height: 40px;
    margin: 20px auto 0;
    background: url("../../assets/theme-img/login-btn.png");
    background-size: 100% 100%;
    font-size: 15px;
    // font-family: PingFangSC-Medium;
    // font-weight: 500;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    letter-spacing: 4px;
    span {
        display: inline-block;
        line-height: 40px;
    }
}
</style>